var r = document.querySelector(':root');
var aside = document.querySelector('aside')
var switchBar = document.querySelector('.switch-bar');
var sideBar = document.querySelector('.side-bar');
// 给开关按钮添加点击方法
switchBar.addEventListener('click',changeSideState)
// 给拖拽条添加移动方法
sideBar.addEventListener('mousedown', dragLine)
/** 获取css变量
 * @param var_name 变量名称
 * @param var_unit 变量单位,可选
**/
function var_get(var_name,var_unit) {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  var result = rs.getPropertyValue(var_name)
  if (var_unit) {
    return Number(result.replace(var_unit,''))
  } 
  return result
}

/** 设置css变量
 * @param var_name 变量名称
 * @param var_value 变量值 
**/
function var_set(var_name,var_value) {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty(var_name, var_value);
}
/**
 * 修改菜单栏状态，展开或收起，同时修改按钮图标
 */
function changeSideState() {
  let asideWidth = var_get('--left-side-width', 'px')
  // 收起状态
  if (asideWidth !== 20) {
    collapseSide()
  } else {
    openSide()
  }
}
// 折叠菜单，设置宽度，添加折叠类名，控制按钮图标，收起时不允许拖拽
function collapseSide() {
  var_set('--left-side-width', '20px')
  aside.classList.add('collapse')
    switchBar.children[0].classList.remove('icon-arrowleft')
    switchBar.children[0].classList.add('icon-arrow-right')
    // 菜单收起状态，取消拖拽事件
  sideBar.removeEventListener('mousedown', dragLine)
}
// 展开菜单，设置宽度，移除折叠类名，控制按钮图标，展开时允许拖拽
function openSide() {
  var_set('--left-side-width', var_get('--left-side-base-width'))
    aside.classList.remove('collapse')
    switchBar.children[0].classList.add('icon-arrowleft')
    switchBar.children[0].classList.remove('icon-arrow-right')
    aside.classList.remove('fix')
    // 菜单打开状态，添加拖拽事件
    sideBar.addEventListener('mousedown', dragLine)
}
/** 拖拽方法
 * 移除动画效果，不然拖拽时有残影；
 * 鼠标移动控制 aside 宽度
 * 鼠标抬起移除移动方法，添加动画；如果鼠标抬起后菜单宽度小于最小宽度，直接收起
*/
function dragLine(e) {
  // 禁用默认行为，拖动时不会选中文字图片
  e.preventDefault()
  aside.classList.remove('transition')
  document.onmousemove = changeSideWidth
  document.onmouseup = function () {
    document.onmousemove = null
    aside.classList.add('transition')
    let asideMinWidth = var_get('--left-side-min-width', 'px')
    let asideWidth = var_get('--left-side-width', 'px')
    if (asideWidth<asideMinWidth) {
      collapseSide()
    }
  }
}
function changeSideWidth(e) {
  let asideMaxWidth = var_get('--left-side-max-width', 'px')
  let x = e.pageX - 2
  if (x>=20&&x<=asideMaxWidth) {
    var_set('--left-side-width',x + 'px')
  } 
}
